<template>
  <div class="hazTree">
    <div class="haz-header">
      调查任务列表
    </div>
    <div>
      <el-collapse  accordion @change="handleWorkChange"  style="margin-left: 20px;">
        <el-collapse-item v-for="(item) in workData" :key="item.id" :title="simpleWorkName(item.name)" :name="item.id">
          <span class="card-title">调查任务</span>
          <div>
            {{item.name }}
          </div>
          <div style="text-align: left;">创建时间：{{ item.createTime }}</div>
          <div  style="text-align: left;">创建人：{{ item.createBy}}</div>
          <span class="card-title">本级信息</span>
          <el-card class="box-card" v-if="areaData && areaData.areaConfirm" @click.native="thisTaskHandler" shadow="hover">

            <el-col class="areaInfo">
              <el-row>
                区划名称：<span>{{areaData.areaConfirm.areaName }}</span>
              </el-row>
              <el-row>
                区划编码：<span>{{ areaData.areaConfirm.areaCode }}</span>
              </el-row>
              <el-row>
                区划级别：<span>{{ areaLevelName(areaData.areaConfirm.areaLevel) }}</span>
              </el-row>
              <el-row>
                任务状态：<span>{{ areaData.message }}</span>
              </el-row>
              <el-row v-if="areaData.status ==='0'">
                <el-button type="primary" style="float: right;" @click="toConfirm" size="small">确 认</el-button>
                <el-button type="primary" style="float: right;" @click="toChange" size="small">变更调整</el-button>
              </el-row>
              <el-row v-if="areaData.status ==='1'">
                <el-button type="primary" style="float: right;" @click="backConfirm" size="small">取消确认</el-button>
              </el-row>
              <el-row v-if="areaData.status ==='2'">
                <el-button  type="primary" style="float: right;" @click="backChangeHandler" size="small">取消申请</el-button>
              </el-row>
            </el-col>
          </el-card>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Emit,Prop} from 'vue-property-decorator';
import {
    publishAdnStartList
} from '@/api/investWork';

import {areaConfirm,backAreaConfirm,backChange} from '@/api/areaConfirm'
@Component({
  components: {}
})
export default class WorkTree extends Vue {
  private workData: any = [];

  selectWorkId!:number;
  @Prop() private areaData:any;

  categoryCheckHandler(data: any) {
    this.areaData= null;
    this.$emit('selected', data);
  }

  get simpleWorkName() {
    return function(name){
      if (name.length > 8) {
        return name.slice(0, 5) + '...';
      }
    return name;
    }
  }

  backChangeHandler(){
    backChange({workId:this.selectWorkId}).then((res:any) =>{
       if(res.code == 200){
          this.$message.success(res.msg)
       }else{
        this.$message.error(res.msg)
       }
       this.$emit('workSelected', this.selectWorkId);
    });
  }

  @Emit('toChangeApply')
  toChange(){
    console.log("-------")
  }

  backConfirm(){
    backAreaConfirm({workId:this.selectWorkId}).then((res:any) =>{
      if(res.code == 200){
          this.$message.success(res.msg)
       }else{
        this.$message.error(res.msg)
       }
       this.$emit('workSelected', this.selectWorkId);
    });
  }

  toConfirm(){
    areaConfirm({workId:this.selectWorkId}).then((res:any) =>{
       if(res.code == 200){
          this.$message.success(res.msg)
       }else{
  
        this.$message.error(res.msg)
       }
       this.$emit('workSelected', this.selectWorkId);
    });
  }

  private get areaLevelName(){
    return function(level){
        switch(level){
          case 1:
            return "省级";
          case 2:
              return "市级";
          case 3:
           return "县级";
        }
    }
  }

  @Emit('workSelected')
  handleWorkChange(item){
      this.selectWorkId = item;
      return item;
  }

  thisTaskHandler(){
    this.$emit('workSelected', this.selectWorkId);
  }


  mounted(){
    publishAdnStartList().then(res =>{
      this.workData =res.data;
    })
  }

}
</script>
<style lang="scss" scoped>
.hazTree{
  width: 260px;
  background-color: #ffffff;
  padding: 12px 0;
  .haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
  .card-title{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
  .box-card{
      cursor: pointer;
  }
}
</style>
